import React, {useState} from 'react';
import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert,ScrollView } from 'react-native';
import NativeLocalStorage from './specs/NativeLocalStorage';
import axios from 'axios';
import {Ant03} from './Timer';
import {Test002} from './Timer2';

import {Test01} from './Redux01';

import { styles} from './MyStyle';

import { Base001} from './base01';

// import Button from '@ant-design/react-native/lib/button';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';

import { Button, Icon, WhiteSpace, WingBlank,Toast } from '@ant-design/react-native'
  

const EMPTY = '<empty>';


// 箭头函数定义
const hi = (parameters:String) => {
  // 函数体
  console.log(`Hello, ${parameters}!`)
  return parameters;
};


// 定义 dpToPx 函数
export  const dpToPx = (dp:number) => {
  const scale = PixelRatio.get();
  return Math.round(dp / scale);
};

export function greet(name:String) {
  console.log(`Hello2, ${name}!`)
  return `Hello, ${name}!`;
}

function Mylist(){
  const list = ["Element 1", "Element 2"];
  return (<View style={styles.row}>
  {list.map((item, index) => (
            <MyButton01
            text={item+":"+(index+1)}
              onPress={() => Alert.alert(`${item} Pressed`)}
            />
        ))}
  </View>)
}

// http://rn.mobile.ant.design/docs/react/introduce
// http://rn.mobile.ant.design/components/radio/



// npx react-native-asset

// 定义返回数据的类型
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}


export function Ant02() {
  const name = "John"; // 假设这里有一个 name 变量
  const [count, setCount] = useState(0);

// 定义状态来保存获取的数据和加载状态
const [data, setData] = useState<Todo | null>(null);

// 定义一个函数来发送请求
const fetchData = async () => {
  try {
    // 发送 GET 请求
    const response = await axios.get<Todo>('https://jsonplaceholder.typicode.com/todos/1');
    setData(response.data);  // 保存返回的数据
  } catch (err) {
  } finally {
  }
};

  return <View  style={styles.row}>
<MyButton01 text="请求" onPress={fetchData}></MyButton01>

{data && (
        <View>
          <Text>Title: {data.title}</Text>
          <Text>ID: {data.id}</Text>
        </View>
      )}
  </View>;
}


export const showToast = (str:string) => {
  Toast.success(str, 0.3);
};


export function Ant01() {
  const name = "John"; // 假设这里有一个 name 变量
  const [count, setCount] = useState(0);
  return <View  style={styles.row}>
       
<MyButton01 text="Ant03"></MyButton01>
<Text>Current count: {count}</Text>
<Button onPress={() => setCount(count + 1)}>Increase  </Button>
<Button onPress={() => setCount(count - 1)}>Decrease  </Button>
<Button loading>loading button</Button>

  </View>;
}



export function MyLayout2(){

  const [value, setValue] = React.useState<string | null>(null);

  const [editingValue, setEditingValue] = React.useState<
string | null
>(null);


React.useEffect(() => {
  const storedValue = NativeLocalStorage?.getItem('myKey');
  setValue(storedValue ?? '');
  }, []);


  function saveValue() {
    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
    setValue(editingValue);
  }

  function clearAll() {
  NativeLocalStorage?.clear();
  setValue('');
}


function deleteValue() {
  NativeLocalStorage?.removeItem(editingValue ?? EMPTY);
  setValue('');
}

function start() {
  NativeLocalStorage?.start('123');
}

const navigation = useNavigation();
  return (
  <ScrollView   style={{ 
    paddingLeft: 16,
    // paddingBottom:20,
    paddingTop:16,

   }}>
 <Text>Hello</Text>
 <Test01/>
 <Test002/>
 <Base001/>
 <Ant02></Ant02>
 <Ant03></Ant03>
 <Ant01></Ant01>

 <View style={styles.row}>
<Mylist/>


      <MyButton01 text="打开首页2" onPress={start}></MyButton01>
      <MyButton01 text="Hi" onPress={
        ()=>hi('你好')
        }></MyButton01>


      </View>



      <View style={{ height: 20 }} />
      <MyButton01 text="详细2" onPress={() => navigation.navigate('Abc',{   itemId: 86,})}></MyButton01>
      <Text style={styles.text}>
        Current stored value is: {value ?? 'No Value'}
      </Text>
      <TextInput
        placeholder="Enter the text you want to store"
        style={styles.textInput}
        onChangeText={setEditingValue}
      />
      <Button2 title="Save" onPress={saveValue} />
      <Button2 title="Delete" onPress={deleteValue} />
      <Button2 title="Clear" onPress={clearAll} />
      <View style={{height:20}}></View>
  </ScrollView>
  )

  }



export function MyLayout(){
  return (
<View style={styles.buttonWrapper}>

{/* <Button>default</Button> */}


{/* <Button type="primary" onPress={() => Alert.alert('Primary Button Clicked')}>
        Primary Button
      </Button> */
      }


<TouchableOpacity style={{
position:"absolute",
top:10,
width:"50%",
height:300,
backgroundColor:"#889933"
}}
    >
      <Text
      >
      Hello
      </Text>
    </TouchableOpacity>





      </View>
  )
}

// 自定义 MyButton01 组件
const MyButton01 = ({
  alpha = 1.0, // 透明度
  text = '',
  containerColor = '#0000ff', // 默认背景色 (MYBLACK_Percent5)
  shape = 10/3.5, // 圆角 (ButtonDefaults.shape)
  textColor = '#FFFFFF', // 默认文字颜色
  size = { width: 164, height: 44 }, // 按钮尺寸
  fontSize = 24, // 默认字体大小 (MyFont_Size)
  fontWeight = 'normal', // 字体粗细
  fontFamily = 'SourceHanSansCN-Regular', // 字体
  onPress = (text:string) => {}, // 点击事件回调
}) => {
  // const fontSizeInPx = 48
  // const fontSizeInDp = dpToPx(fontSizeInPx); // 根据屏幕密度计算 dp
  return (
    <TouchableOpacity
      onPress={() => onPress(text)}
      style={[
        styles.button,
        {
          backgroundColor: containerColor,
          borderRadius: shape,
          width: size.width,
          height: size.height,
          opacity: alpha,
        },
      ]}
    >

      <Text
        style={{
          color: textColor,
          fontSize: fontSize,
          // fontWeight: fontWeight,
          // fontFamily: fontFamily, // 自定义字体
        }}
      >
        {text}
      </Text>
    </TouchableOpacity>
  );
};


export const BackButton = ({onPress = (text:string) => {}}) => {
  return (
    <MyButton01
      text="返回" // 按钮文本
      containerColor="white" // 按钮背景颜色
      textColor="#000000" // 按钮文本颜色
      onPress={onPress} // 按钮点击事件
    />
  );
};


export const MYBLACK = '#333333'; // 不带 alpha 通道

// myConstant.js
export const MYBLUE = '#2c72e5';

export const MYBLACK_Percent5 = 'rgba(51, 51, 51, 0.05)';
export const MYBLACK_Percent10 = 'rgba(51, 51, 51, 0.1)';

// export default MyButton01;
export {MyButton01};
